<script>
import { getRowHeight } from './utils'
import StyleConvertor from "./StyleConvertor.js";

export default {
  props: {
    rows: {
      type: Array,
      default: () => []
    },
    cols: {
      type: Array,
      default: () => []
    },
    helper:{
      type: Object,
      require:true,
    }
  },
  data(){
    return {
      borderStyle:"1px solid #0091ff"
    }
  },
  render(h) {
    return h('table', {
      class:'jtable-border'
    },
      this.rows.map((row, rowIndex) => {
        return h('tr',{
          style:{
            display: row.height == '0px'?'none':''
          }
        },[
          this.cols.map((col, colIndex) => {
            const cell =row.cells[colIndex+''];
            return h('td', {             
              style:
              {
                ...(cell?this.helper.getBorderStyle(cell):{}),
                width: col.width,
                height: row.height,
                display: col.width == '0px'?'none':''
              },
            })
          })
        ])
      })
    )
  }
}
</script>

<style scoped>
table {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  overflow: hidden;
  table-layout: fixed;
  width:fit-content;
}

td {
  box-sizing: border-box;
}
</style>